<!--
 * @Description: * 
 * @Date: 2020-12-26 23:24:31
 * @LastEditTime: 2021-03-25 16:14:18
 * @Author: Ji YingHao
 * @FilePath: \iview\pages\index.vue
-->
<template>
  <div class="container">
    <div class="container_box">
      <Carousel
        v-model="value1"
        autoplay
        :autoplay-speed="3000"
        class="carousel_l"
        loop
      >
        <CarouselItem v-for="(item,i) in groomList" :key="i">
          <div class="demo-carousel">
            <img :src="item.image" alt="" srcset="" />
          </div>
        </CarouselItem>
      </Carousel>
      <!-- <div class="carousel_r"></div> -->
    </div>
    <div class="list_" v-for="(item, index) in list" :key="index">
      <Divider orientation="left">
        <Icon type="md-medical" /> {{ item.name }}
      </Divider>
      <Row>
        <Col span="6" v-for="(li, index) in item.list.list" :key="index">
          <Card class="card_">
            <div style="text-align: center" class="desc_">
              <nuxt-link
                class="link_"
                :to="{ name: 'info', query: { id: li.id } }"
              >
                <img :src="li.image" />
              </nuxt-link>
              <h6>
                <nuxt-link
                class="link_"
                :to="{ name: 'info', query: { id: li.id } }"
              >
              {{ item.storeName }}
              </nuxt-link>
              </h6>
              <p>
                <!-- params -->
                <nuxt-link
                  class="link_"
                  :to="{ name: 'list', query: { id: li.id } }"
                >
                  <Badge
                    class="button_title"
                    status="processing"
                    color="geekblue"
                    :text="item.name"
                  />
                </nuxt-link>
              </p>
              <p><Badge status="error" color="red" text="近期102次下载" /></p>
              <p>
                <Badge
                  status="success"
                  color="blue"
                  text="2020-12-12 01:20:56"
                />
              </p>
            </div>
          </Card>
        </Col>
      </Row>
      <p>
        <Button type="primary" shape="circle">
          查看全部 {{ item.name }} - {{ '' }} <Icon type="md-arrow-round-forward" />
        </Button>
      </p>
    </div>
  </div>
</template>

<script>
import Logo from "~/components/Logo.vue";
import API from "@/api/index";
export default {
  components: {
    Logo
  },
  data() {
    return {
      value1: 0,
      img: "https://pic4.zhimg.com/50/v2-b2bf803eccc380a483d84d94f8fe48cc_400x224.jpg",
      img_: "https://file.iviewui.com/asd/asd-pro-3.png",
      list: [],
      groomList: [],
      itemList: []
    };
  },
  mounted:  function(){
    console.log("getVerifyCode()", API);
    this.info();
    this.groomListFun();
  },
  methods: {
    info() {
      API.category().then((res) => {
        this.itemList = res.data;
        res.data.forEach((item, index) => {
          this.products(item.name, item.id);
        });
      });
    },

    groomListFun(){
      API.groomList('1')
      .then( (res)=>{
        this.groomList = res.data.list;
      })
    },

    products(name, id) {
      // this.list.forEach(item => {
      API.products({ id: id }).then((res) => {
        console.log( res );
        this.list.push({
          name: name,
          list: res.data
        });
      })
      .catch(err=>{
        console.log(err);
      });
      // });
    },
  },
  // asyncData(context) {
  //   console.log( 'context', context );
  //   return API.category()
  //   .then(res => {
  //     console.log(res)
  //   }).catch(err => {
  //     console.log(err)
  //   })
  // },
};
</script>

<style lang="scss">
.container {
  width: 100%;
  margin: 0 auto;
  border: solid 1px #fff;
  margin-top: 20px;
  box-sizing: border-box;
  height: 100%;
  margin-bottom: 80px;
  .container_box {
    display: flex;
    .carousel_l {
      width: 100%;
      height: 300px;
      img {
        width: 100%;
        height: 300px;
      }
    }
    // .carousel_r {
    //   background-color: #333;
    //   width: 50%;
    //   height: 200px;
    // }
  }
  .list_ {
    margin-top: 20px;
    > p {
      text-align: center;
      button {
        width: 200px;
      }
    }
    .ivu-card {
      margin-bottom: 15px;
    }
    img {
      width: 100%;
      height: 200px;
    }
    .card_ {
      margin: 0 10px 20px 10px;
    }
    .desc_ {
      h6 {
        text-align: left;
        border-bottom: solid 1px #e0e0e0;
        padding-bottom: 10px;
        padding-top: 5px;
        margin-bottom: 10px;
      }
      p {
        text-align: left;
      }
    }
    .button_title > span {
      color: #2d8cf0 !important;
    }
    .button_title:hover span {
      cursor: pointer !important;
      color: #0a7bf4 !important;
    }
  }
}
</style>

